<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ page language="java" import="com.supereye.platform.web.sys.model.SysUser" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
	<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>后端管理平台</title>
    <c:set var="ctx" value="${pageContext.request.contextPath}" />
    <link href="pages/bootstrap/css/bootstrap.min.css" rel="stylesheet">
	<link href="pages/bootstrap/css/bootstrap-theme.min.css" rel="stylesheet">
	<link rel="stylesheet" href="pages/bootstrap/animate.min.css">
	<script src="pages/jquery/jquery-1.12.4.min.js"></script>
    <script src="pages/bootstrap/js/bootstrap.min.js"></script>
    <script src="pages/scrollbar/jquery.mCustomScrollbar.concat.min.js"></script>
    <link href="pages/scrollbar/jquery.mCustomScrollbar.css" rel="stylesheet" />
	<style>
		.left{
			width: 145px;
			position: absolute;
			float: left;
			margin: 0;
		}
		.right{
			margin-left: 145px;
			position: relative;
		}
		body{
			font-family: Microsoft YaHei;
		}
		a{
			text-decoration: none;
			color: white;
		}
		a:link{
			text-decoration:none;
		}
		a:visited{
			text-decoration:none; 
		}
		a:hover{
			text-decoration:none;
			font-weight: bold;
			color: white;
			font-family: Microsoft YaHei;
		}
		a:active{
			text-decoration:none;
		}
		.leftMenu
		{
			width:100%;
			height:106px;
			text-align: center;
			cursor: pointer;
		}
		.topBtn
		{
			float: right;
			width: 100px;
			text-align:center;
			padding-top: 18px;
			cursor: pointer;
		}
		.menu-click
		{
			background-color:#e5f6fe;
  			border-left:3px solid #03a9f4;
  			color:#03a9f4;
		}
	</style>
  </head>
  <body style="overflow-x: hidden;overflow-y:hidden;">
	<div class="container-fluid" style="height:100px;background-color:#03a9f4;">
		<div style="float: left;padding-top: 18px;">
			<img src="pages/images/top_logo.png">
		</div>
		<div id="btn_logout" class="topBtn">
			<img src="pages/images/btn_quit.png">
			<br>
			<font style="font-size: 18px;color: white;"><a>退出系统</a></font>
		</div>
		<div id="btn_passwordPage" class="topBtn">
			<img src="pages/images/bth_adminstrator.png">
			<br>
			<font style="font-size: 18px;color: white;"><a>管理员</a></font>
		</div>
		<div id="btn_homePage" class="topBtn" >
			<img src="pages/images/btn_home1.png">
			<br>
			<font style="font-size: 18px;color: white;"><a>首页</a></font>
		</div>
		<div style="line-height: 100px;float: right;color: white;font-size: 16px;">
			<marquee id="welcom" scrollamount="3" direction="left">欢迎您，<%=((SysUser)request.getSession().getAttribute("loginUser")).getName()%></marquee>
		</div>
    </div>

	<div id="leftDiv" class="left" style="height:500px;">
		<div style="width:100%;height:24px;background-color: #e5f6fe;padding-top: 7px;">
			<img id="leftMoveBtn" src="pages/images/menu_on.png" style="vertical-align: middle;margin-left: 85%;cursor: pointer;">
		</div>
		<div id="leftMenuDiv" style="height:300px;">
			<div class="leftMenu" url="pages/main/OrgManager.jsp" style="margin-top: 8px;">
				<img src="pages/images/ico_framework.png" style="margin-top: 30px;"/>
				<div>组织架构</div>
			</div>
			
			<div class="leftMenu" url="pages/main/UserManager.jsp">
				<img src="pages/images/ico_user-control.png" style="margin-top: 30px;"/>
				<div>用户管理</div>
			</div>
			
			<div class="leftMenu" url="pages/main/ExpertManager.jsp">
				<img src="pages/images/ico_expert.png" style="margin-top: 30px;"/>
				<div>专家管理</div>
			</div>
			
			<div class="leftMenu" url="pages/main/TerminalManager.jsp">
				<img src="pages/images/ico_computer.png" style="margin-top: 30px;"/>
				<div>终端管理</div>
			</div>
			
			<div class="leftMenu" url="pages/main/TerminalManager.jsp">
				<img src="pages/images/ico_Voice-configuration.png" style="margin-top: 30px;"/>
				<div>语音配置</div>
			</div>
			
			<div class="leftMenu" url="pages/main/AdminManager.jsp">
				<img src="pages/images/ico_admin-maintain.png" style="margin-top: 30px;"/>
				<div>管理员维护</div>
			</div>
			
			<div class="leftMenu" url="aa.jsp">
				<img src="pages/images/ico_system-maintain.png" style="margin-top: 30px;"/>
				<div>系统管理</div>
			</div>
		</div>	
	</div>

	<div id="rightDiv" class="right animated fadeInRight" style="height:1000px;background-color:rgb(242,241,239);">
		<iframe style="position:absolute;left:0;top:0;padding: 12px;" src="" width="100%" height="100%" align="top" frameborder="0" scrolling="auto" marginwidth="0" marginheight="0" border="0" allowtransparency="true" id="iframeBody"></iframe>
	</div>
	<div style="position: fixed;bottom:0px;left: 145px;width: 100%;background-color: #f1f1f1;height: 30px;line-height: 30px;text-align: right;padding-right: 190px;font-size: 12px;">
		<font style="font-weight: bold;">Copyright</font> topeye Company © 2017-2018
	</div>
  </body>
  <script type="text/javascript">
  	(function($){
		$(window).load(function(){
			//调整左边菜单DIV高度
			var height = window.screen.availHeight;
			$("#leftMenuDiv").css("height",(height-250+24+8)+"px");
			
			$("#leftMenuDiv").mCustomScrollbar({
				scrollButtons:{
					enable:true,//两端按钮支持
					scrollType:"continuous",
					scrollAmount:40
				},
				//autoHideScrollbar:true,
				scrollInertia:0,
				theme:"light"/*"light", "dark", "light-2", "dark-2", "light-thick", "dark-thick", "light-thin", "dark-thin"*/
			});
			
			//载入首页
			$('#iframeBody').attr('src','pages/main/Home.jsp');
		});
	})(jQuery);
  	
  	$("#btn_homePage").click(function(){
  		$(".leftMenu").each(function(){
  			$(this).removeClass("menu-click");
  		});
  		$('#iframeBody').attr('src','pages/main/Home.jsp');
  	});
  	
  	$("#btn_passwordPage").click(function(){
  		$(".leftMenu").each(function(){
  			$(this).removeClass("menu-click");
  		});
  		$('#iframeBody').attr('src','pages/main/password.jsp');
  	});
  	
  	
  	$("#btn_logout").click(function(){
			$.ajax({
		        type: "post",
		        dataType: "json",
		        url: '${ctx}/login/loginout',
		        data:{
		        },
		        success: function (data) {
		        	if(data.status=="1"){
		        		window.location.href = "login.html";
		        	}
		        },
				error:function(){
				}
		    });
  	});
  	
  	$("#leftMoveBtn").click(function(){
  		$("#rightDiv").width($("#rightDiv").width()+115);
  	    $("#rightDiv").animate({left:'-115px'}, "slow",function(){
  		  
  		  var leftBar = document.createElement('div');
  		  leftBar.id = "leftBar";
  		  leftBar.innerHTML = "<div id='rightMoveBtn' style='cursor:pointer;text-align:center;padding-top:7px;'> <img src='pages/images/menu_off.png'/> </div>";
  		  document.body.appendChild(leftBar);
  		  $("#leftBar").width(30);
  		  $("#leftBar").height(1000);
  		  $("#leftBar").css("background-color","#e5f6fe");
  		  $("#leftBar").css("position","absolute");
  		  $("#leftBar").css("left","0px");
  		  $("#leftBar").css("top","100px");
  		  
  		  $("#rightMoveBtn").on("click",function(){
  			  $("#leftBar").remove();
	 		  $("#rightDiv").animate({left:'+0px'}, "slow",function(){
	 			 $("#rightDiv").width($("#rightDiv").width()-115);
	  		  });
  		  });
  		  
  	  });
  	});
  	
  	$(".leftMenu").on("click",function(){
  		$(".leftMenu").each(function(){
  			var innerSrc = $(this).find("img").attr("src");
  			$(this).removeClass("menu-click");
  			var newSrc = innerSrc.replace(/_pr/, "");
  			$(this).find("img").attr("src",newSrc);
  		});
  		
  		var src = $(this).find("img").attr("src");
  		
  		$(this).addClass("menu-click");
  		$(this).find("img").attr("src",src.replace(/.png/, "_pr.png"));
  		
  		$('#iframeBody').attr('src',$(this).attr("url"));
  	});
  	
  </script>
</html>